<template>
  <view>
    <uni-card :is-shadow="false">
      <view class="color-size">开票总金额：<span>{{ dataDetails.amount }}</span>元</view>
      <view class="color-size">开票订单：<span>{{ dataDetails.num }}</span>笔</view>
    </uni-card>
    <!-- 开票信息 -->
    <uni-card :is-shadow="false" title="基本信息" class="container">
      <view>开票订单号：<span>{{ dataDetails.number }}</span></view>
      <view>发票抬头：<span>{{ dataDetails.title }}</span></view>
      <view>纳税人识别号：<span>{{ dataDetails.taxpayerNumberHide }}</span></view>
      <view>开票类型：
        <template v-for="(dictItem, index) in dicts.ec_invoice_type">
          <template v-if="dataDetails.type == dictItem.value">
            <span>{{ dictItem.text }}</span>
          </template>
        </template>
      </view>
      <view>申请时间：<span>{{ dataDetails.createTime }}</span></view>
      <view v-if="dataDetails.status == 0">审核时间：<span>{{ dataDetails.completeTime }}</span></view>
      <view v-else>开票时间：<span>{{ dataDetails.completeTime }}</span></view>
      <view>开票状态：
        <template v-for="(dictItem, index) in dicts.ec_invoice_order_status">
          <template v-if="dataDetails.status == dictItem.value">
            <uni-tag :text="dictItem.text" :type="dictItem.type"/>
          </template>
        </template>
      </view>
      <view>开户银行名称：<span>{{ dataDetails.bankName }}</span></view>
      <view>企业银行账号：<span>{{ dataDetails.bankAccount }}</span></view>
      <view>企业联系电话：<span>{{ dataDetails.telephone }}</span></view>
      <view>企业所在地址：<span>{{ dataDetails.address }}</span></view>
      <view>发票接收邮箱：<span>{{ dataDetails.email }}</span></view>
      <view class="flex_between">
        <view>
          发票网页链接：<span>{{ dataDetails.invoiceUrl }}</span>
        </view>
        <view v-if="dataDetails.status == 1">
          <uni-icons type="paperclip" size="14" color="#00a660"></uni-icons>
          <text
              style="color: #00a660;font-size: 20rpx;"
              v-clipboard:copy="dataDetails.invoiceUrl"
              v-clipboard:success="clipboardSuccess"
              v-clipboard:error="clipboardError"
          >复制
          </text>
        </view>
      </view>
      <view>开票备注：<span>{{ dataDetails.remark }}</span></view>
      <view v-if="dataDetails.status == 0">出票失败原因：<span>{{ dataDetails.checkRemark }}</span></view>
      <view v-else>出票备注：<span>{{ dataDetails.checkRemark }}</span></view>
      <view slot="actions" class="card-actions">
        <view v-if="dataDetails.status == 2" class="card-actions-item" @click="handleRevoke(dataDetails)">
          <uni-icons type="undo" size="18" color="#f3a73f"></uni-icons>
          <text class="card-actions-item-text" style="color: #f3a73f;">撤销</text>
        </view>
        <view
            v-if="dataDetails.status == 3 || dataDetails.status == 0"
            class="card-actions-item"
            @click="handleDelete(dataDetails)">
          <uni-icons type="trash" size="18" color="#f78989"></uni-icons>
          <text class="card-actions-item-text errorColor">删除</text>
        </view>
        <view class="card-actions-item" @click="invoiceOrder">
          <uni-icons type="list" size="18" color="#00a660"></uni-icons>
          <text class="card-actions-item-text themeColor">订单</text>
        </view>
      </view>
    </uni-card>
  </view>
</template>

<script>
import {getDictsByNameForUni} from "@/utils/dicts";
import {delInvoiceOrder, getInvoiceOrder, revokeInvoiceOrder} from "@/api/ec/console/fee/invoiceOrder";

export default {
  data() {
    return {
      dicts: {
        ec_invoice_order_status: [],
        ec_invoice_type: [],
      },
      // 详情数据
      dataDetails: {},
    }
  },
  onLoad(option) {
    // this.getInvoiceOrder(option.id);
    this.getDicts();
    // 获取参数
    this.dataDetails = JSON.parse(option.dataDetails)
  },
  created() {
    this.getInvoiceOrder();
  },
  methods: {
    /**加载数据字典*/
    getDicts() {
      // 签署套餐有效期
      this.dicts.ec_invoice_order_status = getDictsByNameForUni("ec_invoice_order_status");
      this.dicts.ec_invoice_type = getDictsByNameForUni("ec_invoice_type");
    },
    /** 获取订单详情 */
    getInvoiceOrder(id) {
      this.$modal.loading();
      getInvoiceOrder(this.dataDetails.id).then(response => {
        uni.hideLoading();
        this.dataDetails = response.data;
        this.dataDetails.num = response.data.orderPayIds.split(",").length;
      }).catch(() => {
        uni.hideLoading();
      });
    },
    /** 撤销 */
    handleRevoke(item) {
      let that = this
      uni.showModal({
        title: '系统提示',
        content: '您确认要撤销开票申请吗？撤销开票后将系统将不在为您开具发票，您亦可重新申请开票。',
        confirmColor: '#00a660',
        success: function (res) {
          if (res.confirm) {
            let data = {id: item.id};
            revokeInvoiceOrder(data).then(() => {
              uni.hideLoading();
              uni.$emit('refreshInvoicesManageIndex');
              // 延迟500毫秒显示loading效果
              setTimeout(() => {
                // 执行查询的方法
                that.getInvoiceOrder(item.id);
                that.$modal.msgSuccess("撤销开票成功");
              }, 300)
            });
          } else {
          }
        }
      })
    },
    /** 删除 */
    handleDelete(item) {
      let that = this
      uni.showModal({
        title: '系统提示',
        content: '您确认要删除开票申请吗？删除后将无法恢复。',
        confirmColor: '#00a660',
        success: function (res) {
          if (res.confirm) {
            delInvoiceOrder(item.id).then(() => {
              uni.hideLoading();
              uni.$emit('refreshInvoicesManageIndex');
              that.$modal.msgSuccess("删除成功");
              // 延迟500毫秒显示loading效果
              setTimeout(() => {
                // 返回上级页面
                uni.navigateBack(1);
              }, 300)
            });
          } else {
          }
        }
      })
    },
    /** 开票订单 */
    invoiceOrder() {
      uni.navigateTo({url: './invoiceOrder?orderPayIds=' + this.dataDetails.orderPayIds});
    },
    /** 复制失败 */
    clipboardError() {
      this.$modal.msgError("复制失败");
    },
    /** 复制链接成功 */
    clipboardSuccess() {
      this.$modal.msgSuccess("复制成功");
    },
  }
}
</script>

<style lang="scss" scoped>
.container {
  view {
    line-height: 48rpx;
  }
}

.rightIcon {
  color: #666;
  font-size: 28rpx;
}

.color-size {
  line-height: 48rpx;

  span {
    color: $uni-color-primary;
    font-size: 32rpx;
    padding-right: 8rpx;
    font-weight: bold;
  }
}

page {
  background-color: $uni-bg-color;
}
</style>
